<template>
  <el-container class="page-container">
	  <div class="goods-list">
	  <div class="search-bar">
		<!-- <el-input v-model="searchName" placeholder="请输入商品名称" clearable @clear="fetchGoodsList" @change="fetchGoodsList" class="search-input"></el-input> -->
		<el-select v-model="selectedOption" placeholder="请选择商品名称" clearable @clear="fetchGoodsList" @change="fetchGoodsList" class="search-input">
		<el-option label="snack" value="1"></el-option>
		<el-option label="shoe" value="2"></el-option>
		<el-option label="phone" value="3"></el-option>
		<el-option label="swear" value="4"></el-option>
		<el-option label="computer" value="5"></el-option>
		</el-select>
		<el-input v-model="searchPrice" placeholder="请输入商品价格(小于等于)" clearable @clear="fetchGoodsList" @change="fetchGoodsList" class="search-input"></el-input>
		<el-button type="primary" @click="fetchGoodsList">查询</el-button>
		<el-button type="primary" @click="handleLogout">主界面</el-button>
	  </div>
  
	  <el-table :data="currentPageData" style="width: 100%">
		<el-table-column label="序号" width="100">
		<template #default="{ $index }">
		<span>{{ tableIndex($index) }}</span>
		</template>
  </el-table-column>
		<el-table-column prop="shop" label="店铺名"></el-table-column>
		<el-table-column prop="brand" label="商品名"></el-table-column>
		<el-table-column prop="price" label="价格"></el-table-column>
		<el-table-column label="操作">
		<template #default="{ row }">
			<!-- <el-button
        size="mini"
        type="success"
        @click="toggleLike(row.like)"
        :icon="row.like === 0 ? 'el-icon-heart' : 'el-icon-heart-outline'"
        :plain="row.like === 1"
      >
        喜欢
      </el-button> -->
	  <el-button @click="changeFeatureLikeFn(row.goods_id, row.like)">
		<heart-outlined v-if="row.like === false" class="icon_class" />
		<heart-filled v-else class="icon_class" style="color: rgba(255, 77, 79, 0.85)" />
		</el-button>
		<el-button size="mini" type="danger" @click="deleteItem(row.goods_id)">删除</el-button>
		</template>
	</el-table-column>
	  </el-table>
	<div class="pagination-center">
	  <el-pagination
		@current-change="handlePageChange"
		:current-page="currentPage"
		:page-size="pageSize"
		:total="totalItems">
	  </el-pagination>
	</div>
	</div>
</el-container>
  </template>
  
  <script setup lang="ts">
  import { ref, computed, onMounted } from 'vue';
  import { useRouter, useRoute } from "vue-router";
  import { GoodsList } from "@/api/gooddetail"
  import {GoodsRemove} from "@/api/goodremove"
  import { GoodsLike } from '@/api/goodlike';
  import {
    HeartOutlined,
    HeartFilled,
    PlusOutlined,
  } from "@ant-design/icons-vue";
  const router = useRouter();
  const route = useRoute();

  interface GoodItem {
  goods_id: number;
  price: string;
  shop: string;
  brand: string;
  like: boolean;
	}
const goodsList = ref<GoodItem[]>([]);
// 搜索条件
const searchPrice = ref('');
const selectedOption = ref('');
const goodsData = ref<GoodsItem[]>([
  ]);
const fetchGoodsList = async () => {
  try {
	const priceValue = searchPrice.value;
	const selectedValue = selectedOption.value;
    const response = await GoodsList(selectedValue, priceValue);
	console.log(response.data)
	goodsData.value = response.data
  } catch (error) {
    console.error('Error fetching goods list:', error);
  }
};
// 删除
// const deleteItem = async (good_id:number) =>{
// 	try{
// 		await GoodsRemove(good_id);
//         console.log(`商品 ${good_id} 删除成功`);
//         await fetchGoodsList();
// 	} catch(error){
// 		console.error("error in delete", error)
// 	}
// };
const deleteItem = async (good_id: number) => {
    try {
        // 弹出确认框
        const confirmed = confirm("确定要删除该商品吗？");
        if (!confirmed) {
            // 用户取消了删除操作
            return;
        }

        // 用户确认了删除操作
        await GoodsRemove(good_id);
        console.log(`商品 ${good_id} 删除成功`);
        await fetchGoodsList();
    } catch (error) {
        console.error("error in delete", error);
    }
};
// 喜欢
const changeFeatureLikeFn = async (good_id:number, like:boolean) =>{
  const newLikeValue = !like;
  await GoodsLike(good_id, newLikeValue)
  await fetchGoodsList();
}
  // 分页相关
//   const pageSize = 10;
//   const currentPage = ref(1);
//   const totalItems = computed(() => goodsData.value.length);
//   const currentPageData = computed(() => {
// 	const startIndex = (currentPage.value - 1) * pageSize;
// 	const endIndex = startIndex + pageSize;
// 	return goodsData.value.slice(startIndex, endIndex);
//   });
// 每页显示数量和当前页码
const pageSize = 10;
const currentPage = ref(1);

const totalItems = computed(() => goodsData.value.length);

const currentPageData = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  return goodsData.value.slice(startIndex, endIndex);
});

const tableIndex = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize;
  return (index) => startIndex + index + 1;
});
  const handleLogout = () => {
  router.push('/home');
};

  
  // 处理页码变化
  const handlePageChange = (page: number) => {
	currentPage.value = page;
  };


  onMounted(() => {
	fetchGoodsList();
});
  </script>
  
  <style scoped>
  .page-container {
  background-image: url('/assets/image/filebg.jpg');
  background-size: cover;
  background-position: center;
  }
  .goods-list {
	width: 90vw;
	height: 100vh;
	/* margin: 40px; */
	margin-top: 100px;
	/* width: 100%; */
  }
  
  .search-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
  }
/*   
  .heart-button {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
} */

  .search-input {
	flex: 1;
	margin-right: 10px;
  }
  .pagination-center {
  display: flex;
  justify-content: center;
}
  </style>
  